<template>
	<swiper-item>
		<view class="swiper-item" id="content-wrap1" catch-touchmove="handleTouchMove">
			<view class="content">
				<view class="contentBox">
					<view class="mengceng">
						<view class="mengcengTitle">
							我的最佳曲目
						</view>
						<view class="mengcengContent">
							100 首歌曲
						</view>
					</view>
					<image src="@/static/image/songs/marcela.png" class="mengcengImage" mode=""></image>
				</view>
				<view class="contentBox">
					<view class="mengceng">

						<view class="mengcengTitle">
							最新添加的
						</view>
						<view class="mengcengContent">
							323 首歌曲
						</view>
					</view>
					<image src="@/static/image/songs/unsplash6.png" class="mengcengImage" mode=""></image>
				</view>
				<view class="contentBox">
					<view class="mengceng">
						<view class="mengcengTitle">
							历史记录
						</view>
						<view class="mengcengContent">
							450 首歌曲
						</view>
					</view>
					<image src="@/static/image/songs/unsplash1.png" class="mengcengImage" mode=""></image>
				</view>
				<view class="contentBox">
					<view class="mengceng">
						<view class="mengcengTitle">
							我的收藏
						</view>
						<view class="mengcengContent">
							996首歌曲
						</view>
					</view>
					<image src="@/static/image/songs/frankunsplash.png" class="mengcengImage" mode=""></image>
				</view>
			</view>
			<view class="headerTitleBox">
				<view class="Played">
					最近播放
				</view>
				<view class="viewAll">
					查看全部
				</view>
			</view>

			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
				<view class="scroll-view-item_H">
					<image src="@/static/image/songs/NoPathCopy.png" mode="" class="imgaeMusic"></image>
					<view class="title">
						周杰伦
					</view>

				</view>
				<view class="scroll-view-item_H">
					<image src="@/static/image/songs/NoPathCopy.png" mode="" class="imgaeMusic"></image>
					<view class="title">
						张良
					</view>
				</view>
				<view class="scroll-view-item_H">
					<image src="@/static/image/songs/NoPath11.png" mode="" class="imgaeMusic"></image>
					<view class="title">
						刀郎
					</view>
				</view>
				<view class="scroll-view-item_H">
					<image src="@/static/image/songs/unsplash3.png" mode="" class="imgaeMusic"></image>
					<view class="title">
						那英
					</view>
				</view>
			</scroll-view>

		</view>
	</swiper-item>
</template>

<script>
	export default {
		// components:{
		// 	upAvatar
		// },
		data() {
			return {
				arr: [{
					url: "",

				}]
			}
		},
		methods: {
			scroll(event) {
				console.log(event)
			},
			handleTouchMove(event) {
				console.log(event)
				event.stopPropagation() // 阻止事件冒泡
			}
		},
	}
</script>

<style lang="scss" scoped>
	.swiper-item {
		width: 750rpx;
		padding-bottom: 80px;


		.content {
			width: 750rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 30rpx;

			.contentBox {
				width: 375rpx;
				height: 256rpx;
				position: relative;

				.mengceng {
					width: 375rpx;
					height: 256rpx;
					background-color: rgba(0, 0, 0, 0.3);
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					overflow: hidden;


					.mengcengTitle {
						width: 90%;
						font-weight: 400;
						color: $app-text-color;
						margin: 0 auto;
						font-size: 25rpx;
						margin-top: 150rpx;
					}

					.mengcengContent {
						width: 90%;

						font-weight: 400;
						color: $app-text-color-80;
						margin: 0 auto;
						margin-top: 10rpx;
						font-size: 20rpx;
					}
				}

				.mengcengImage {
					width: 375rpx;
					height: 256rpx;


				}

			}
		}

		.headerTitleBox {
			width: 90%;
			height: 60rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			margin: 70rpx auto;

			.Played {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}

			.viewAll {
				font-size: 22rpx;
				font-weight: 400;
				line-height: 50rpx;
				color: rgba(237, 135, 112, 1);
			}
		}


		.scroll-view_H {
			white-space: nowrap;
			width: 95%;
			margin-left: 5%;
			margin-top: 46rpx;
		}

		.scroll-view-item {
			height: 226rpx;
			line-height: 226rpx;
			text-align: center;
			font-size: 36rpx;
		}

		.scroll-view-item_H {
			display: inline-block;
			width: 180rpx;
			height: 226rpx;
			font-size: 24rpx;
			font-weight: 400;
			padding-right: 5%;

			.title {
				width: 100%;
				font-size: 24rpx;
				color: $app-text-color-60;
				font-size: 24rpx;
				font-weight: 400;
				margin-top: 20rpx;
				text-align: center;
			}

			.imgaeMusic {
				width: 180rpx;
				height: 162rpx;
			}

		}
	}
</style>